<template>
	<view>
		<!-- 切换 -->
		<view class="lb-tabs">
			<view class="tabs-item" :class="tabsIndex == index?'active':''" v-for="(item,index) in tabsData"
				:key="index" @click="clickTabs(index)">
				<view class="name">
					{{item.name}}
				</view>
				<view class="btn">

				</view>
			</view>
		</view>
		<!-- 地图门店 -->
		<view class="lb-map" v-if="tabsIndex == 0">
			<map style="width: 100%; height: 100%;" scale="12" :latitude="latitude" :longitude="longitude"
				:markers="covers" :enable-3D="true" @markertap="markertap" @labeltap="labeltap"
				@callouttap="callouttap">
			</map>
		</view>

		<!-- 列表门店 -->
		<view class="lb-list" v-else>
			<view class="list-item" v-for="(item,index) in listData" :key="index">
				<view class="item-left">
					<image src="/static/logo.png" mode=""></image>
				</view>
				<view class="item-right">
					<view class="name">
						{{item.name}}
					</view>
					<view class="tel">
						<view class="tel-item">
							<image src="/static/icon/pren.png" mode=""></image>
							<text>{{item.contact}}</text>
						</view>
						<view class="tel-item">
							<image src="/static/icon/tel.png" mode=""></image>
							<text>{{item.mobile}}</text>
						</view>
					</view>
					<view class="addr">
						<view class="left">
							<text>{{item.district}}{{item.address}}</text>
							<text>离您{{item.distance_cn}}</text>
						</view>
						<view class="right">
							<image src="/static/icon/map-1.png" mode=""></image>
							<text>导航</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 地图显示 -->
		<u-popup :show="show" @close="close" @open="open">
			<view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getNearbyStoresApiMap,
		getNearbyStoresApiList
	} from '@/api/apis/wash.js';

	export default {
		data() {
			return {
				tabsIndex: 0,
				tabsData: [{
						name: '地图'
					},
					{
						name: '列表'
					},
				],
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false
			}
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading && this.tabsIndex == 1) {
				this.getList();
			}

		},
		onLoad() {
			if (this.currentLocation && this.currentLocation != 'undefined') {
				this.latitude = this.currentLocation.latitude;
				this.longitude = this.currentLocation.longitude;
			}
			this.getVLocation();
			this.getMap();
		},
		methods: {
			//切换
			clickTabs(i) {
				this.tabsIndex = i;
				if (this.tabsIndex == 1) {
					this.page = 1;
					this.getList();
				}
			},
			markertap(e) {
				console.log(e, 'markertap')
			},
			// labeltap(e){
			// 	console.log(e,'labeltap')
			// },
			callouttap(e) {
				console.log(e, 'callouttap')
			},

			//获取地图数据
			getMap() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				getNearbyStoresApiMap().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						let data = res.data;
						let newArr = []
						data.forEach((val, key) => {
							newArr.push({
								id: val.id,
								// code: 1, //item.ids,
								latitude: val.latitude,
								longitude: val.longitude,
								width: 24,
								height: 24,
								iconPath: '/static/icon/map.png',
								callout: { //自定义标记点上方的气泡窗口 点击有效
									content: val.name, //文本
									color: '#333333', //文字颜色
									fontSize: 9, //文本大小
									borderRadius: 5, //边框圆角
									borderWidth: '10',
									bgColor: '#FFFFFF', //背景颜色
									display: 'ALWAYS', //常显
								},
							})
						})
						this.covers = newArr;
					}
				})
			},
			//获取列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				getNearbyStoresApiList({
					// is_recommend: 1,
					lng: this.longitude,
					lat: this.latitude,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						// this.listData = res.data.list;
						if (this.page == 1) {
							this.listData = res.data.data;
						} else {
							this.listData = this.listData.concat(res.data.data);
						}
						if (res.data.total >= this.page * this.limit) {
							//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
							this.isLoading = false;
							this.page++;
						}
					}
				})
			},
			//获取经纬度
			getVLocation() {
				let _this = this;
				if (this.currentLocation && this.currentLocation != 'undefined') {
					return;
				}
				uni.getLocation({
					type: "gcj02", //wgs84 gcj02
					altitude: true,
					success(res) {
						console.log(res)
						let location = {
							latitude: res.latitude,
							longitude: res.longitude
						};
						// console.log(location);
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
						_this.$u.vuex('currentLocation', location)
					}
				});
			}

		},

	}
</script>

<style lang="scss">
	.lb-tabs {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #FFFFFF;

		.tabs-item {
			width: calc(100% - 2rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			// border-bottom: 2rpx solid transparent


			&:nth-of-type(1) {
				border-right: 1rpx solid #F5F5F5;
			}

			&:nth-of-type(2) {
				border-left: 1rpx solid #F5F5F5;
			}

			.name {
				font-size: $main-font-28;
				color: $main-font-color;
				font-weight: bold;
				padding: 24rpx 0 12rpx;

			}

			.btn {
				height: 0;
				width: 0;
				border-width: 10rpx;
				border-style: solid;
				border-color: transparent transparent transparent transparent; //分别为上右下左
			}
		}

		.active {
			border-bottom: 2rpx solid #00D26E;

			.name {
				color: #00D26E;

			}

			.btn {
				border-color: transparent transparent #00D26E transparent; //分别为上右下左
			}
		}

	}

	.lb-map {
		width: 100%;
		height: calc(100vh - 86rpx);
	}

	.lb-list {
		.list-item {
			background-color: #FFFFFF;
			padding: 32rpx;
			margin-bottom: 12rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: row;


			.item-left {
				width: 172rpx;
				height: 208rpx;
			}

			.item-right {
				width: calc(100% - 172rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 12rpx 24rpx;
				box-sizing: border-box;

				.name {
					font-size: $main-font-28;
					font-weight: bold;
					color: $main-font-color;
				}

				.tel {
					display: flex;
					flex-direction: row;


					.tel-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						padding-right: 50rpx;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						text {
							font-size: $main-font-24;
							font-weight: 400;
							color: $main-font-color;
							padding-left: 12rpx;
						}
					}

				}

				.addr {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.left {
						display: flex;
						flex-direction: column;

						text {
							font-size: $main-font-20;
							font-weight: 400;
							color: $main-font-color;

							&:nth-of-type(2) {
								color: $main-font-color-grey9;
							}
						}
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						text {
							padding-top: 6rpx;
							font-size: $main-font-18;
							color: $main-font-color-grey9;
						}
					}
				}
			}
		}
	}
</style>